<template>
    <BPTable ref='tableRef' align='center' row-key='id' name-key='name' :columns='columns' :api='pageApi' :buttons='buttons'>
        <template #name="{record}">
            <!-- <a-space :size="16">
                <a-image v-if="record.cover" :width="50" :src="imageUrl + record.cover"></a-image>
                <div>{{ record.name }}</div>
            </a-space> -->
        </template>
    </BPTable>

    
</template>

<script lang='ts' setup>
    import { pageApi } from '@/api/WaterBills'
    import { message, Modal } from 'ant-design-vue'
    import { ref } from 'vue'
    import { useI18nStore } from '@/store/i18n'
    import { useResourceStore } from '@/store/resource'
    import { parseTime } from '@/utils'


    const imageUrl = import.meta.env.B_NET_STATIC_URL

    const i18n = useI18nStore()
    const resourceStore = useResourceStore()

    const visible = ref(false)
    const formRef = ref()
    const dialogTitle = ref()

    const tableRef = ref()

    const currentRow = ref<any>()
    const currentCategory = ref()

    function onChangeCategory(e) {
        currentCategory.value = e
        tableRef.value.load()
    }


    const buttons = ref<SearchButton[]>([])




    const columns = ref<Column[]>([
        {
            title : '设备号',
            dataIndex : 'deviceId',
            inSearch : true,
        },

        {
            title : "水量(ML)",
            dataIndex : 'waterUsage',
            
        },


        {
            title : '水费(元)',
            dataIndex : 'amount',
        },

        {
            title : '原水TDS',
            dataIndex : 'tdsRaw',
        },

        {
            title : '净水TDS',
            dataIndex : 'tdsClean',
        },

        {
            title : "时间",
            dataIndex : 'reportTime',
            align : 'center',
            customRender({record}) {
                return parseTime(record.reportTime)
            },
            // inSearch : true,
            // type : 'rangePicker',
            // attrs : {
            //     showTime : true,
            //     valueFormat : 'X'
            // }
        },

    
    ])


    async function submit() {
        const res = await formRef.value.submit()
        if(res.success) {
            tableRef.value.reload()
            visible.value = false
            message.success('保存成功')
        }else {
            Modal.error({
                title : res.msg
            })
        }
    }

    
</script>

<style lang="scss" module>
    .container{
        display: flex;
        .category{
            width: 250px;
            border-right: 1px solid $borderColor;
        }
        .table{
            flex: 1;
        }
    }
</style>